<template>
  <div class="product-comments">
    <div class="comments-header">
      <h3>商品评价 ({{ comments.length }})</h3>
      <div class="rating-summary" v-if="comments.length">
        <div class="average-rating">
          <span class="rating">{{ averageRating }}</span>
          <div class="stars">
            <i
              v-for="n in 5"
              :key="n"
              :class="[
                'fas fa-star',
                { active: averageRating >= n, inactive: averageRating < n },
              ]"
            ></i>
          </div>
        </div>
        <div class="rating-tags">
          <span
            v-for="tag in ratingTags"
            :key="tag.name"
            :class="{ active: selectedTag === tag.name }"
            @click="filterByTag(tag.name)"
          >
            {{ tag.name }} ({{ tag.count }})
          </span>
        </div>
      </div>
    </div>

    <div v-if="loading" class="loading">
      <i class="fas fa-spinner fa-spin"></i> 加载中...
    </div>

    <div v-else-if="comments.length" class="comments-list">
      <div
        v-for="comment in filteredComments"
        :key="comment.id"
        class="comment"
      >
        <div class="comment-header">
          <div class="user-info">
            <img :src="comment.userAvatar" :alt="comment.userName" />
            <span class="username">{{ comment.userName }}</span>
          </div>
          <div class="rating">
            <i
              v-for="n in 5"
              :key="n"
              :class="[
                'fas fa-star',
                { active: comment.rating >= n, inactive: comment.rating < n },
              ]"
            ></i>
          </div>
        </div>
        <div class="comment-content">
          <p class="comment-text">{{ comment.content }}</p>
          <div v-if="comment.images" class="comment-images">
            <img
              v-for="(image, index) in comment.images"
              :key="index"
              :src="image"
              @click="showImage(image)"
            />
          </div>
          <div class="comment-meta">
            <span class="date">{{ formatDate(comment.date) }}</span>
            <div class="actions">
              <button @click="likeComment(comment)">
                <i :class="['far fa-thumbs-up', { liked: comment.liked }]"></i>
                {{ comment.likes }}
              </button>
              <button @click="replyComment(comment)">
                <i class="far fa-comment"></i> 回复
              </button>
            </div>
          </div>
          <div v-if="comment.replies" class="replies">
            <div v-for="reply in comment.replies" :key="reply.id" class="reply">
              <span class="reply-user">{{ reply.userName }}</span>
              <span class="reply-text">{{ reply.content }}</span>
              <span class="reply-date">{{ formatDate(reply.date) }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div v-else class="no-comments">暂无评价，快来抢沙发吧~</div>
  </div>
</template>

<script>
export default {
  name: "ProductComments",
  props: {
    productId: {
      type: Number,
      required: true,
    },
  },
  data() {
    return {
      comments: [],
      loading: false,
      selectedTag: "",
      ratingTags: [
        { name: "全部", count: 0 },
        { name: "好评", count: 0 },
        { name: "中评", count: 0 },
        { name: "差评", count: 0 },
        { name: "有图", count: 0 },
      ],
    };
  },
  computed: {
    averageRating() {
      if (!this.comments.length) return 0;
      const total = this.comments.reduce(
        (sum, comment) => sum + comment.rating,
        0
      );
      return (total / this.comments.length).toFixed(1);
    },
    filteredComments() {
      if (!this.selectedTag) return this.comments;

      return this.comments.filter((comment) => {
        switch (this.selectedTag) {
          case "好评":
            return comment.rating >= 4;
          case "中评":
            return comment.rating === 3;
          case "差评":
            return comment.rating <= 2;
          case "有图":
            return comment.images && comment.images.length;
          default:
            return true;
        }
      });
    },
  },
  methods: {
    async fetchComments() {
      this.loading = true;
      try {
        // 模拟API调用
        await new Promise((resolve) => setTimeout(resolve, 1000));
        this.comments = [
          {
            id: 1,
            userName: "张三",
            userAvatar: require("@/assets/images/comments/avatar/16ed72697ad631ef049072b3af374253.jpg"),
            rating: 5,
            content: "花很新鲜，包装很精致，很满意的一次购物！",
            images: [
              require("@/assets/images/comments/photo-1494336956603-39a3641efa1c.jpg"),
              require("@/assets/images/comments/photo-1526047932273-341f2a7631f9.jpg"),
            ],
            date: "2024-02-14",
            likes: 12,
            liked: false,
            replies: [
              {
                id: 1,
                userName: "客服小美",
                content: "感谢您的支持，欢迎下次光临！",
                date: "2024-02-14",
              },
            ],
          },
          {
            id: 2,
            userName: "李四",
            userAvatar: require("@/assets/images/comments/avatar/fc45c0164a1ed72b58a9e22ef2c6e361.jpg"),
            rating: 4,
            content: "整体不错，就是快递有点慢。",
            date: "2024-02-13",
            likes: 3,
            liked: false,
          },
        ];

        // 更新标签计数
        this.updateTagCounts();
      } catch (error) {
        console.error("获取评论失败:", error);
      } finally {
        this.loading = false;
      }
    },
    updateTagCounts() {
      const counts = {
        全部: this.comments.length,
        好评: this.comments.filter((c) => c.rating >= 4).length,
        中评: this.comments.filter((c) => c.rating === 3).length,
        差评: this.comments.filter((c) => c.rating <= 2).length,
        有图: this.comments.filter((c) => c.images && c.images.length).length,
      };

      this.ratingTags.forEach((tag) => {
        tag.count = counts[tag.name];
      });
    },
    filterByTag(tag) {
      this.selectedTag = this.selectedTag === tag ? "" : tag;
    },
    formatDate(date) {
      return new Date(date).toLocaleDateString();
    },
    showImage(image) {
      // 实现图片预览功能
      console.log("预览图片:", image);
    },
    likeComment(comment) {
      comment.liked = !comment.liked;
      comment.likes += comment.liked ? 1 : -1;
    },
    replyComment(comment) {
      // 实现回复功能
      console.log("回复评论:", comment);
    },
  },
  mounted() {
    this.fetchComments();
  },
};
</script>

<style scoped>
.product-comments {
  padding: 20px;
}

.comments-header {
  margin-bottom: 30px;
}

.comments-header h3 {
  font-size: 20px;
  color: #333;
  margin-bottom: 20px;
}

.rating-summary {
  display: flex;
  align-items: center;
  gap: 40px;
}

.average-rating {
  display: flex;
  align-items: center;
  gap: 15px;
}

.average-rating .rating {
  font-size: 36px;
  color: #ff6b6b;
  font-weight: bold;
}

.stars {
  display: flex;
  gap: 5px;
}

.stars i {
  color: #ffd700;
}

.stars i.inactive {
  color: #ddd;
}

.rating-tags {
  display: flex;
  gap: 15px;
}

.rating-tags span {
  padding: 5px 15px;
  border: 1px solid #ddd;
  border-radius: 15px;
  cursor: pointer;
  transition: all 0.3s;
}

.rating-tags span:hover,
.rating-tags span.active {
  background: #ff6b6b;
  color: white;
  border-color: #ff6b6b;
}

.loading {
  text-align: center;
  padding: 40px;
  color: #666;
}

.comments-list {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.comment {
  border-bottom: 1px solid #eee;
  padding-bottom: 20px;
}

.comment-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 10px;
}

.user-info img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
}

.username {
  color: #333;
  font-weight: 500;
}

.rating i {
  color: #ffd700;
  font-size: 14px;
}

.rating i.inactive {
  color: #ddd;
}

.comment-content {
  padding-left: 50px;
}

.comment-text {
  color: #333;
  line-height: 1.6;
  margin-bottom: 15px;
}

.comment-images {
  display: flex;
  gap: 10px;
  margin-bottom: 15px;
}

.comment-images img {
  width: 100px;
  height: 100px;
  object-fit: cover;
  border-radius: 4px;
  cursor: pointer;
  transition: transform 0.3s;
}

.comment-images img:hover {
  transform: scale(1.05);
}

.comment-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #999;
  font-size: 14px;
}

.actions {
  display: flex;
  gap: 20px;
}

.actions button {
  background: none;
  border: none;
  color: #666;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 5px;
}

.actions button:hover {
  color: #ff6b6b;
}

.actions i.liked {
  color: #ff6b6b;
}

.replies {
  margin-top: 15px;
  padding: 15px;
  background: #f8f9fa;
  border-radius: 4px;
}

.reply {
  margin-bottom: 10px;
  font-size: 14px;
}

.reply:last-child {
  margin-bottom: 0;
}

.reply-user {
  color: #ff6b6b;
  font-weight: 500;
  margin-right: 10px;
}

.reply-date {
  color: #999;
  margin-left: 10px;
}

.no-comments {
  text-align: center;
  padding: 40px;
  color: #666;
  background: #f8f9fa;
  border-radius: 8px;
}

@media (max-width: 768px) {
  .rating-summary {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }

  .rating-tags {
    flex-wrap: wrap;
  }

  .comment-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .comment-content {
    padding-left: 0;
  }

  .comment-images img {
    width: 80px;
    height: 80px;
  }
}
</style> 